<template>
  <div class="student">
    <div style="margin-top: 15px" class="content">
      <el-input placeholder="请输入内容" class="input-with-select">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
      <el-button type="primary" class="commit" @click="showDialog">
        添加项目
      </el-button>
      <dialogBox :visible="visible" @ok="ok" @cancel="cancel"></dialogBox>
    </div>

    <div class="select">
      <div class="sel">
        <span>选择班级:</span>
        <el-select
          v-model="params.class"
          placeholder="请选择"
          @change="classChange"
        >
          <el-option label="全部" value="all"></el-option>
          <el-option
            v-for="i in classList"
            :key="i"
            :label="i"
            :value="i"
          ></el-option>
        </el-select>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" class="serch iconfont icon-excel">
        导出Excel表格
      </el-button>
    </div>
    <el-table border style="width: 100%" :data="studentList">
      <el-table-column
        prop="headimgurl"
        label="头像"
        width="180"
        align="center"
      >
        <template v-slot="{ row }">
          <el-avatar :src="row.headimgurl"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="degree"
        label="学历"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="class"
        label="班级"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="productUrl"
        label="项目"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="cTime"
        label="创建时间"
        align="center"
      ></el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template>
          <el-button type="">查看</el-button>
          <el-button type="">编辑</el-button>
          <el-button type="">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="currentPage"
    ></el-pagination>
  </div>
</template>
<script>
import * as api from "@/api/student";
import dialogBox from "@/components/Dialog";
export default {
  meta: {
    title: "xyxmgl",
    name: "学员项目管理",
    icon: "iconfont icon-shangpinguanli",
  },
  data() {
    return {
      // 学生列表
      studentList: [],
      //班级列表
      classList: [],
      // 学生总条数
      total: 0,
      // 请求参数 初始化值
      params: { page: 1, count: 10, class: null },
      //显示隐藏
      visible: false,
    };
  },
  components: {
    dialogBox,
  },
  created() {
    this.getStudentList();
    this.selectClass();
  },
  methods: {
    // 分页获取学生列表
    getStudentList() {
      api.studentList(this.params).then((res) => {
        this.studentList = res.data.data;
        this.total = res.data.total;
      });
    },
    //分页切换
    currentPage(even) {
      console.log(even);
      this.params.page = even;
      this.getStudentList();
    },
    //获取班级列表
    selectClass() {
      api.classList().then((res) => {
        console.log(res.data);
        this.classList = res.data.data;
      });
    },
    //
    classChange(even) {
      console.log("value", this.params);
      if (even == "all") {
        this.params.class = null;
      }
      this.getStudentList();
    },
    //显示隐藏dialog
    showDialog() {
      // console.log(11);
      this.visible = true;
    },
    //点击了确定
    ok(formData) {
      console.log(formData);
      this.visible = false;
      //添加学员信息
      api.addStudent(formData).then((res) => {
        console.log(res);
        if (res.data.state) {
          //更新列表
          this.getStudentList();
        }
      });
    },
    //点击了取消
    cancel() {
      this.visible = false;
    },
  },
};
</script>
<style lang="less" scoped>
.content {
  overflow: hidden;
}
.input-with-select {
  float: left;
  width: 400px !important;
}
.commit {
  float: left;
  margin-left: 15px;
}
.select {
  margin-top: 20px;
  overflow: hidden;
  .sel {
    float: left;
  }
}
.serch {
  float: right;
}
</style>
